<template>
  <div>
    <div class="wrapper">
      <div class="swaper">
        <home-swiper class="home-swiper" @itemClick="toNewsDetail" :swiperData="newsData.bannerList"></home-swiper>
      </div>
      <van-tabs v-model="active" @click="getNewsList">
        <van-tab title="今日头条"></van-tab>
        <van-tab title="楼市资讯"></van-tab>
        <van-tab title="本地新闻"></van-tab>
        <van-tab title="成交数据"></van-tab>
      </van-tabs>
      <div class="list-component">
        <div class="emptyBox" v-if="!informationList.length">
          <img src="~@/assets/images/manhua/quesheng@2x.png">
          <div class="decorate">当前暂无内容~</div>
        </div>
        <div class="list-box">
          <div class="list-item" @click="toNewsDetail(item)" v-for="(item, index) in informationList" :key="index">
            <div class="list-img">
              <img src="~@/assets/images/hailang/error_img.png">
            </div>
            <div class="list-content">
              <div class="list-title">{{item.title}}</div>
              <div class="list-descripe-box">
                <div class="list-descripe">
                  <div class="type">{{item.gmtCreate}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { HomeSwiper } from '@/views/home/components'
import { summaryMixin } from '@/base/mixins/tableMix'
import { mineApi } from '@/api'
export default {
  components: {
    HomeSwiper
  },
  mixins: [summaryMixin],
  async created() {
    this.getNews()
  },
  data() {
    return {
      active: 0,
      newsData: {},
      informationList: []
    }
  },
  methods: {
    navchange(id) {
      this.cid = id
    },
    async getNews() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中'
      })
      const res = await mineApi.getNews({
      })
      this.newsData = res.data
      this.informationList = this.newsData.informationList
      this.$toast.clear()
    },
    async getNewsList() {
      const res = await mineApi.getNewsList({
        type: this.active + 1,
        pageSize: this.limit,
        pageNo: this.page
      })
      this.informationList = res.data.records
    },
    async toNewsDetail(data) {
      localStorage.setItem('newsDataTemp', JSON.stringify(data))
      this.$router.push({
        path: '/detail/news-detail',
        query: {
          id: data.id
        }
      })
    },
    async  _getDataList(data) {
      const res = await mineApi.getNewsList({
        type: this.active + 1,
        pageSize: this.limit,
        pageNo: this.page
      })
      if (!res.data) {
        res.data = []
        return []
      }
      this.goods_list = this.goods_list.concat(res.data.records)
      this.needLoading = !(this.limit > this.goods_list.length)
      return res.data.records
    }
  },
  watch: {
    cid() {
      this.getCategoryList()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
.wrapper {
  font-size: 16px;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  .list-component{
    padding: 0 10px;
    overflow: hidden;
    background-color: #fff;
  }
  .list-box{
    background-color: #fff;
    .list-item{
      display: flex;
      padding: 10px 0;
      border-bottom: 1px solid $color-border;
      &:nth-last-child(1) {
        border-bottom: none;
        margin-bottom: 0px;
      }
      .list-img{
        margin-right: 10px;
        img{
          width: 90px;
        }
      }
      .list-content{
        display: flex;
        flex: 1;
        flex-direction: column;
        .list-title{
          color: #1a1a1a;
        }
        .list-address{
          color: #666;
        }
        .list-descripe-box{
          flex: 1;
          color: #666;
          font-size: 14px;
          flex-direction: column-reverse;
          display: flex;
          .list-descripe{
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
